<template>
    <div class="mask" v-if="showCart && calculations.total > 0"></div>
    <div class="cart">
        <div class="product" v-if="showCart && calculations.total > 0">
            <div class="product_header">
                <div class="product_header_all" @click="setCartItemsChecked(shopId)">
                    <span class="product_header_icon iconfont" v-html="calculations.allChecked ? '&#xe652;' : '&#xe66c;' "></span>全选</div>
                <div class="product_header_clear" 
                @click="cleanCartProducts(shopId)"
                >清空购物车</div>
            </div>
        <div class="product_item" v-for="(item,index) in productList" :key="index">
        <div class="product_item_checked iconfont" v-html="item.check ? '&#xe652;' : '&#xe66c;'"  
        @click="() => changeCartItemChecked(shopId,item._id)"
        ></div>
        <img class="product_item_img" :src="item.imgUrl" >
        <div class="product_item_detail">
        <h4 class="product_item_title">{{item.name}}</h4>
        <p class="product_item_price">
            <span class="product_item_yen">&yen;</span>{{item.price}}
            <span class="product_item_origin">&yen;{{item.oldPrice}}</span>
        </p>        
        </div>
        <div class="product_number">
            <span class="product_number_minus iconfont" @click="() => {
              changeCartItemInfo(shopId,item._id,item,-1)
            }">&#xe613;</span>{{item.count || 0}}
            <span class="product_number_plus iconfont"
            @click="() => {
              changeCartItemInfo(shopId,item._id,item,1)
            }"
            >&#xe660;</span>            
        </div>
        </div>
        </div>
        <div class="check">
            <div class="check_icon">
                <img class="check_icon_img" src="@/assets/basket.png" 
                @click="handleCartShowChange"
                >
             <div class="check_icon_tag">{{calculations.total}}               
             </div>               
            </div>
        <div class="check_info">
            总计 :<span class="check_info_price">&yen;{{calculations.price}}</span>
        </div>
        <div class="check_btn">
        <router-link :to="{path: `/orderConfirmation/${shopId}`}">
          去结算
        </router-link>
        </div>
        </div>
    </div>
</template>

<script>
import {  ref } from '@vue/runtime-core'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { useCommonCartEffect } from '../../effects/cartEffects'
//获取购物车信息逻辑
const useCartEffect = (shopId) => {
    const { changeCartItemInfo,productList,calculations } = useCommonCartEffect(shopId)
    const store = useStore()
    const changeCartItemChecked = (shopId,productId) => {
              store.commit('changeCartItemChecked',{shopId,productId})
          }
    const cleanCartProducts = (shopId) => {
        store.commit('cleanCartProducts', { shopId })
    }
    const setCartItemsChecked = (shopId) => {
        store.commit('setCartItemsChecked', { shopId })
    }
    return { calculations,productList,changeCartItemInfo,changeCartItemChecked,cleanCartProducts,setCartItemsChecked }
}

export default {
    name: 'Cart',
    setup() {
        const route = useRoute()
        const shopId = route.params.id
        const showCart = ref(false)
        const handleCartShowChange = () => {
            showCart.value = !showCart.value
        }
        const { calculations,productList,changeCartItemInfo,changeCartItemChecked,cleanCartProducts,setCartItemsChecked } = useCartEffect(shopId)
        return {
           shopId,calculations,productList,changeCartItemInfo,changeCartItemChecked,cleanCartProducts,setCartItemsChecked,showCart,handleCartShowChange
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables';
@import '../../style/mixin';
.mask{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 1;
}


.cart{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #fff;
}
.product {
  overflow-y: scroll;
  flex: 1;
  background-color: #fff;
  &_header {
    display: flex;
    line-height: .52rem;
    border-bottom: .01rem solid $content-bgColor;
    font-size: .14rem;
    color: $content-fontcolor;
    &_all {
      width: .64rem;
      margin-left: .18rem;
    }
    &_icon {
      display: inline-block;
      margin-right: .1rem;
      vertical-align: top;
      color: $btn-bgColor;
      font-size: .2rem;
    }
    &_clear {
      flex: 1;
      margin-right: .16rem;
      text-align: right;
      &__btn {
        display: inline-block;
      }
    }
  }
  &_item {
    position: relative;
    display: flex;
    padding: .12rem 0;
    margin: 0 .16rem;
    border-bottom: .01rem solid $content-bgColor;
    &_checked {
    line-height: .5rem;
    margin-right: .2rem;
    color: $btn-bgColor;
    font-size: .2rem;
    }
    &_detail {
      overflow: hidden;
    }
    &_img {
      width: .46rem;
      height: .46rem;
      margin-right: .16rem;
    }
    &_title {
      margin: 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $content-fontcolor;
      @include ellipsis;
    }
    &_price {
      margin: .06rem 0 0 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $hightlight-fontColor;
    }
    &_yen {
      font-size: .12rem;
    }
    &_origin {
      margin-left: .06rem;
      line-height: .2rem;
      font-size: .12rem;
      color: $light-fontColor;
      text-decoration: line-through;
    }
    .product_number {
      position: absolute;
      right: 0;
      bottom: .12rem;
      line-height: .18rem;
      &_minus {
        position:relative;
        top: .02rem;
        color: $medium-fontColor;
        margin-right: .05rem;
      }
      &_plus {
        position:relative;
        top: .02rem;
        color: $btn-bgColor;
        margin-left: .05rem;
      }
    }
  }
  
}
.check{
    //ctrl+D 找到所有同类
    display: flex;
    height: .49rem;
    border-top: .01rem solid $content-bgColor;
    line-height: .49rem;
    &_icon{
        position: relative;
        width: .84rem;
        &_img{
            display: block;
            width: .28rem;
            height: .26rem;
            margin: .12rem auto;
            
        }
        &_tag{
            position: absolute;
            left: .46rem;
            top: .04rem;
            padding: 0 .04rem;
            min-width: .2rem;
            height: .2rem;
            line-height: .2rem;
            background-color: $hightlight-fontColor;
            border-radius: .1rem;
            font-size: .12rem;
            text-align: center;
            color: $bgColor;
            transform: scale(.8);
            transform-origin: left center;
        }
    }
    &_info{
        flex: 1;
        color: $content-fontcolor;
        font-size: .12rem;        
        &_price{
            margin-left: .06rem;
            color: $hightlight-fontColor;
            font-size: .18rem;
        }
    }
    &_btn{
        width: .98rem;
        line-height: .49rem;
        background-color: #4fb0f9;
        color: $bgColor;
        text-align: center;
        font-size: .14rem;
        a {
            color: $bgColor;
            text-decoration: none;
          }
    }
}

</style>